<template>
	<div class="mainContent">
		
		<el-dialog :visible.sync="show" top="100px" class="viewDialog">
			<div class="common-table-title">
				<div class="common-table-icon"></div>
				<div class="common-table-fl">{{option.title}}</div>
			</div>
			<div class="productBody">
                <!-- 收取现金 -->
				<el-row v-if="option.popType=='1'">
					<el-form ref="form" class="firstStep" :inline="true" label-width="50px" size="small">
							<el-form-item>
								<el-input class="input-cont" placeholder="订单号售后单"></el-input>
							</el-form-item>
							<el-form-item>
								<div class="normal-btn-group btn-group">
									<div class="normal-btn query-btn">查询</div>
								</div>
							</el-form-item>
					</el-form>
				</el-row>
                <!-- 取消收取现金 -->
                <el-row v-else-if="option.popType=='2'">
					<el-form ref="form" class="firstStep" :inline="true" label-width="50px" size="small">
							<el-form-item>
								<el-input class="input-cont" placeholder="订单号"></el-input>
							</el-form-item>
							<el-form-item>
								<div class="normal-btn-group btn-group">
									<div class="normal-btn query-btn">查询</div>
								</div>
							</el-form-item>
					</el-form>
				</el-row>
                <!-- 存入银行弹 -->
                <el-row v-else-if="option.popType=='3'">
					<el-form ref="form" class="firstStep" label-width="100px" size="small">
							<el-form-item label="可存入金额">
								<el-input class="input-cont" placeholder="0.000"></el-input>
							</el-form-item>
							<el-form-item label="存入金额">
								<el-input class="input-cont" placeholder="0.000"></el-input>
							</el-form-item>
                            <el-form-item label="存入日期">
								<el-date-picker
                                    type="datetime"
                                    placeholder="选择日期时间">
							    </el-date-picker>
							</el-form-item>
                            <el-form-item label="出纳员">
								<el-select placeholder="请选择">
										<el-option label="张3" value="1"></el-option>
										<el-option label="张4" value="2"></el-option>
								</el-select>
							</el-form-item>
					</el-form>
				</el-row>
                <!-- 取消存入银行 -->
                <el-row v-else-if="option.popType=='4'">
					<el-form ref="form" class="firstStep" :inline="true" label-width="80px" size="small">
							<el-form-item label="存入日期">
								<el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期"
                                    end-placeholder="结束日期" size="small"></el-date-picker>
							</el-form-item>
							<el-form-item>
								<div class="normal-btn-group btn-group">
									<div class="normal-btn query-btn">查询</div>
								</div>
							</el-form-item>
					</el-form>
				</el-row>
				<div class="table" v-if="option.popType!='3'">
                    <el-row class="table-bg">
                        <!-- 表格 -->
                        <el-table :data="option.tableDataList" stripe border style="width: 100%" @selection-change="handleSelectionChange">
                            <el-table-column type="selection" width="50" fixed></el-table-column>
                            <el-table-column 
                                v-for="item in option.tableHeader"
                                :key="item.prop"
                                :prop="item.prop" 
                                :label="item.label" 
                                :width="item.width" 
                                :sortable="item.sortable"
                            ></el-table-column>
                        </el-table>
				    </el-row>
                    <!-- 分页 -->
                    <el-row class="pagination-cont">
                        <el-pagination
                            @size-change="handleSizeChange"
                            background
                            @current-change="handleCurrentChange"
                            :current-page="paginationObject.currentPage"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="paginationObject.pageSize"
							:pager-count="5"
                            layout="sizes, prev, pager, next, jumper, slot"
                            :total="paginationObject.total">
                            <div class="pagination-slot">
                                显示
                                <p class="slot-i">{{paginationObject.num1}}</p>
                                到
                                <p class="slot-i">{{paginationObject.num2}}</p>
                                ，共
                                <p class="slot-i">{{paginationObject.total}}</p>
                                记录
                            </div>
                        </el-pagination>
                    </el-row>
				</div>
                <el-row v-if="option.popType=='4'">
					<el-form ref="form" class="firstStep" :inline="true" label-width="80px" size="small">
							<el-form-item label="取消原因">
								<el-input class="input-cont" placeholder=""></el-input>
							</el-form-item>
							<el-form-item label="取消日期">
                                <el-date-picker
                                    type="datetime"
                                    placeholder="选择日期时间">
							    </el-date-picker>
							</el-form-item>
					</el-form>
				</el-row>
                <div class="normal-btn-group btn-group submit-box">
					<div class="normal-btn query-btn" @click="submit">确定</div>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
export default {
    name: 'popExpand',
    data () {
        return {
            paginationObject:{
                currentPage: 1,
                pageSize: 10,
                pageTotal: 1,
                total:1,
                num1:1,
                num2:1
            },
            show:false
        }
    },
    props:{
        option:{
            default:{
                popType:'1',//1收取现金弹窗、2取消收取现金弹窗、3存入银行弹窗、4取消存入银行弹窗
                title:'',
                tableHeader:[],
                tableDataList:[],
            }
        }
    },
    components: {

    },
    mounted() {
        
    },
    methods: {
        //确定提交
        submit(){
            // this.$emit('')
        },
        handleSelectionChange(val){

        },
        handleCurrentChange(val){

        },
        handleSizeChange(val){

        }
    }
}
</script>

<style scoped lang="less">
	.submit-box{
        margin-top:20px;
        justify-content:center;
    }
</style>